<!DOCTYPE html>
<html>
<head>
    <title>注册</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <link type="text/css" href="/css/bootstrap.min.css" rel="stylesheet">
    <script src="/js/jquery.min.js" type="text/javascript"></script>
    <script src="/js/plugins/validate/jquery.validate.min.js" type="text/javascript"></script>
    <script src="/js/plugins/validate/additional-methods.min.js" type="text/javascript"></script>
    <script src="/js/plugins/validate/messages_zh.min.js" type="text/javascript"></script>
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
    <style type="text/css">
        #register-form {
            border: 1px solid rgb(197, 197, 197);
            width: 1000px;
            margin: auto;
            border-image: none;
            padding: 30px;
            border-radius: 3px;
        }
    </style>

</head>
<body>
<h1 class="text-center text-danger">用户注册</h1><br>
<form id="register-form" role="form" class="form-horizontal" method="get">
    <div class="form-group">
        <label class="col-sm-2 control-label" for="firstname">用户名：</label>
        <div class="col-sm-5">
            <input class="form-control" id="firstname" name="firstname"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="password">密码：</label>
        <div class="col-sm-5">
            <input class="form-control" id="password" name="password" type="password"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="confirm_password">确认密码：</label>
        <div class="col-sm-5">
            <input class="form-control" id="confirm_password" name="confirm_password" type="password"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="email">E-Mail：</label>
        <div class="col-sm-5">
            <input class="form-control" id="email" name="email"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="phone">手机号码：</label>
        <div class="col-sm-5">
            <input class="form-control" id="phone" name="phone"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="tel">固定电话：</label>
        <div class="col-sm-5">
            <input class="form-control" id="tel" name="tel"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="address">家庭住址：</label>
        <div class="col-sm-5">
            <input class="form-control" id="address" name="address"/>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <button type="submit" class="btn btn-primary btn-sm">注册</button>
            <button type="reset" class="btn btn-primary btn-sm">重置</button>
        </div>
    </div>
</form>
<script type="application/javascript">
    $(document).ready(function() {
        // 手机号码验证
        jQuery.validator.addMethod("isPhone", function(value, element) {
            var length = value.length;
            return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
        }, "请正确填写您的手机号码。");

        // 电话号码验证
        jQuery.validator.addMethod("isTel", function(value, element) {
            var tel = /^(\d{3,4}-)?\d{7,8}$/g; // 区号－3、4位 号码－7、8位
            return this.optional(element) || (tel.test(value));
        }, "请正确填写您的电话号码。");
        // 匹配密码，以字母开头，长度在6-12之间，必须包含数字和特殊字符。
        jQuery.validator.addMethod("isPwd", function(value, element) {
            var str = value;
            if (str.length < 6 || str.length > 18)
                return false;
            if (!/^[a-zA-Z]/.test(str))
                return false;
            if (!/[0-9]/.test(str))
                return fasle;
            return this.optional(element) || /[^A-Za-z0-9]/.test(str);
        }, "以字母开头，长度在6-12之间，必须包含数字和特殊字符。");

        $("#register-form").validate({
            errorElement : 'span',
            errorClass : 'help-block',
            rules : {
                firstname : "required",
                email : {
                    required : true,
                    email : true
                },
                password : {
                    required : true,
                    isPwd : true
                },
                confirm_password : {
                    required : true,
                    isPwd : true,
                    equalTo : "#password"
                },
                phone : {
                    required : true,
                    isPhone : true
                },
                tel : {
                    isTel : true
                },
                address : {
                    minlength : 10
                }
            },
            messages : {
                firstname : "请输入姓名",
                email : {
                    required : "请输入Email地址",
                    email : "请输入正确的email地址"
                },
                password : {
                    required : "请输入密码",
                    minlength : jQuery.validator.format("密码不能小于{0}个字 符")
                },
                confirm_password : {
                    required : "请输入确认密码",
                    minlength : "确认密码不能小于5个字符",
                    equalTo : "两次输入密码不一致不一致"
                },
                phone : {
                    required : "请输入手机号码"
                },
                tel : {
                    required : "请输入座机号码"
                },
                address : {
                    required : "请输入家庭地址",
                    minlength : jQuery.validator.format("家庭地址不能少于{0}个字符")
                }
            },
            //自定义错误消息放到哪里
            errorPlacement : function(error, element) {
                element.next().remove();//删除显示图标
                element.after('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');
                element.closest('.form-group').append(error);//显示错误消息提示
            },
            //给未通过验证的元素进行处理
            highlight : function(element) {
                $(element).closest('.form-group').addClass('has-error has-feedback');
            },
            //验证通过的处理
            success : function(label) {
                var el=label.closest('.form-group').find("input");
                el.next().remove();//与errorPlacement相似
                el.after('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
                label.closest('.form-group').removeClass('has-error').addClass("has-feedback has-success");
                label.remove();
            },

        });
    });
</script>
</body>
</html>